<template>
  <page-meta :root-font-size="fontsize" style="display: block">
    <div class="page postRecruitmentInformation">
      <xlNavBar :isShare="isShare" title="发布求职需求" bgc="ff9d49"></xlNavBar>
      <div class="container">
        <div class="form_item">
          <xlCell text="求职岗位" tag="（必填）" @click="clickRightQiuZhiJob">
            <template v-slot:right>
              <div class="form-item-right-qiuzhi">请选择</div>
            </template>
            <template v-slot:bottom>
              <div class="form-item-bottom-qiuzhi" v-if="wantJobList">
                <div class="tag" v-for="(item, index) in wantJobList" :key="item['name']">
                  {{ item["name"] }}
                  <i class="iconfont cyguanbixiao" @click="deleteTagJob(index)"></i>
                </div>
              </div>
            </template>
          </xlCell>
        </div>
        <div class="form_item">
          <xlCell text="求职城市" tag="（必填）" @click="clickSelectCity">
            <template v-slot:right>
              <div class="form-item-right-city">
                {{ addressText }}
              </div>
            </template>
          </xlCell>
        </div>
        <div class="form_item">
          <xlCell text="联系电话" tag="（必填）">
            <template v-slot:right>
              <div class="form-item-right-input">
                <input type="number" v-model="form.phone" @change="changePhone" @blur="changePhone" name="phone" id="userName" placeholder="手机号码" />
              </div>
            </template>
          </xlCell>
        </div>
        <div class="form_item">
          <xlCell text="您的称呼" rightIcon="" tag="（必填）">
            <template v-slot:right>
              <div class="form-item-right-input">
                <input type="text" v-model="form.name" name="userName" id="userName" placeholder="请输入" />
              </div>
            </template>
          </xlCell>
        </div>
        <div class="form_item">
          <xlCell text="需求描述" rightIcon="" tag="（必填）">
            <template v-slot:right>
              <div class="form-item-right-btn" @click="getTemplate">自动生成</div>
            </template>
            <template v-slot:bottom>
              <div class="form-item-right-desc area">
                <textarea
                  id="xuqiuTextArea"
                  v-model="form.content"
                  placeholder="请输入或粘贴您的个人描述，让招聘方快速了解您，如：擅长什么菜系，有几年工作经验，期望月薪多少、月休几天等，越详细找工作越快"
                  placeholder-class="textarea-placeholder"
                  @input="xuqiuChange"
                  @blur="xuqiuBlur"
                  :maxlength="xuqiuMaxTextNum"
                />
                <text class="text">{{ `${form.content.split("").length || 0}/${xuqiuMaxTextNum}` }}</text>
              </div>
            </template>
          </xlCell>
        </div>
        <div class="form_item form-bottom">
          <xlCell text="上传图片" rightIcon="" tag="（选填）" :tagtype="1" @click="clickRightQiuZhi">
            <template v-slot:bottom>
              <div class="form-item-right-upload">
                <div class="title2">上传图片，更好的展示自己，最多支持上传4张图片</div>
                <div class="image_list">
                  <div class="item" v-for="(item, index) in picture_url" :key="item">
                    <image :src="item" mode="scaleToFill" />
                    <div class="deletePic" @click="deletePic(index)">
                      <text class="iconfont cyguanbi"></text>
                    </div>
                  </div>
                  <u-upload
                    :previewImage="false"
                    width="74px"
                    height="74px"
                    :fileList="fileList"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    name="1"
                    :multiple="true"
                    :maxCount="4"
                  >
                    <image src="@/static/images/common/upload.png" mode="widthFix" style="width: 76px; height: 76px"></image>
                  </u-upload>
                </div>
              </div>
            </template>
          </xlCell>
        </div>
      </div>
      <div class="btn_wrap">
        <div class="text">
          <span class="s1">发布求职信息即表示遵守</span>
          <span class="s2" @click="$togo('/pages3/userAgreement', { type: 'resume' })">《餐饮信息网求职信息发布规则》</span>
          <span class="s1">，如果违反规则可能导致您的账号异常</span>
        </div>
        <div class="submit" :class="[isFabu ? 'isLight' : '']" @click="submit">立即发布</div>
      </div>
      <selectAddressPopup v-if="showselectAddressPopup" @getAddress="getAddress" :show="showselectAddressPopup" @close="showselectAddressPopup = false"></selectAddressPopup>
      <selectCityPopup
        v-if="showCityPopup"
        :cityList2="wantJobCityList"
        @close="showCityPopup = false"
        ref="selectCityPopup"
        type="select"
        :max="3"
        :show="showCityPopup"
        @getData="getSelectAddress"
      ></selectCityPopup>
      <selectJobPopup :activeList="jobActiveList" v-if="showJobPopup" :show="showJobPopup" @submit="submitJob"></selectJobPopup>
      <phoneCode ref="phoneCode" :show="showCodePopup" :phone="form.phone" @success="codeSuccess" @cancel="cancelCodePopup"></phoneCode>
      <!-- <issuePopup -->
      <u-popup @close="close" v-if="issueAddPopup" top="200" :show="issueAddPopup" bgColor="transparent" mode="center" round="10px">
        <view class="issuePopup">
          <div class="title">
            <i class="iconfont"></i>
            <text>发布成功</text>
          </div>
          <div class="h1">审核通过后将在求职列表展示</div>
          <div class="st">如果您着急找工作，可以点击加急求职来提高曝光量~</div>
          <div class="jjqz" @click="tojj">加急求职</div>
          <div class="desc">系统已根据您的需求为您精准推荐岗位</div>
          <div class="ckgw" @click="toFindWork">查看岗位</div>
        </view>
        <image @click="regulateResume" class="close" src="@/static/images/common/close.png" mode="scaleToFill" />
      </u-popup>
      <u-popup @close="close" v-if="issueEditPopup" top="200" :show="issueEditPopup" bgColor="transparent" mode="center" round="10px">
        <view class="issuePopup issueEditPopup">
          <image class="image" src="./static/images/6.png" mode="scaleToFill" />
          <div class="name">审核通过后将在列表展示</div>
          <image class="icon" src="./static/images/7.png" mode="scaleToFill" />
          <div class="jjqz" @click="regulateResume">我知道了</div>
        </view>
      </u-popup>
    </div>
  </page-meta>
</template>

<script>
import selectAddressPopup from "@/pages2/components/popup/selectAddressPopup.vue";
import selectCityPopup from "@/pages2/components/popup/selectCityPopup.vue";
import selectJobPopup from "@/pages2/components/popup/selectJobPopup.vue";
import phoneCode from "@/pages2/components/popup/phoneCode.vue";
import xlCell from "@/pages2/components/common/xlCell.vue";
import { mapActions, mapGetters, mapMutations } from "vuex";
export default {
  name: "postRecruitmentInformation",
  components: {
    selectCityPopup,
    selectJobPopup,
    phoneCode,
    xlCell,
    selectAddressPopup,
  },
  props: {},
  data() {
    return {
      jobActiveList: [],
      isShare: 0,
      fontsize: "",
      form: {
        picture_url: [],
        phone: "", //联系电话
        content: "", //需求描述
        name: "",
      },
      picture_url: [],
      fileList: [],
      verifyPhone: false, //校验手机号是否验证通过
      issueAddPopup: false, //发布成功
      issueEditPopup: false,
      isEdit: false,
      showCityPopup: false,
      showJobPopup: true,
      showCodePopup: false,
      showselectAddressPopup: false,
      wantJobCityList: [], //求职城市列表
      wantJobList: [], //求职城市列表
      xuqiuMaxTextNum: 500, //需求描述文字最大限制
      xuqiuMinTextNum: 5, //需求描述文字最小限制
      isFabu: false,
      id: null,
      isTop: false,
    };
  },
  created() {
    if (!this.getUserLocationInfo) {
      this.getLocation();
    }
  },
  computed: {
    ...mapGetters("location", ["getSelectCity", "getCurProvince", "getcurProvinceIndex", "getUserLocationInfo", "getMunicipality"]),
    ...mapGetters("user", ["getPhone"]),
    addressText() {
      if (this.wantJobCityList.length) {
        let arr = [];
        this.wantJobCityList.forEach(item => {
          arr.push(item.fullname);
          // this.wantJobCityList.push(item);
        });
        return arr.join(",");
      } else if (this.getSelectCity.length) {
        let arr = [];
        this.getSelectCity.forEach(item => {
          arr.push(item.fullname);

          // this.wantJobCityList.push(item);
        });
        return arr.join(",");
      } else if (this.getCurProvince) {
        // this.wantJobCityList.push(this.getCurProvince);
        return this.getCurProvince.text;
      } else {
        return "选择城市";
      }
    },
  },
  methods: {
    ...mapMutations(["setJobIntention"]),
    ...mapMutations("location", ["setSelectCity", "setUserLocationInfo"]),
    ...mapActions("user", ["setStatus"]),
    async getTemplate() {
      this.$throttle(async () => {
        let job_intention = [];
        if (this.wantJobList.length > 0) {
          this.wantJobList.forEach(item => {
            job_intention.push(item.name);
          });
        }
        let city_text_intention = [];
        if (this.wantJobCityList.length > 0) {
          this.wantJobCityList.forEach(item => {
            city_text_intention.push(item.fullname);
          });
        }

        let params = {
          positions: job_intention.join(","), //求职岗位
          city_list: city_text_intention.join(","), //工作地址
        };
        let res = await this.$http.requestSync("/resumes/template", params);
        if (res.code == 200) {
          this.form.content = res.des;
        }
      }, 300);
    },
    // 发布成功后去加急置顶
    tojj() {
      this.$throttle(() => {
        if (this.isTop) {
          this.$layer.message("已购买加急，请勿重复操作");
          this.$redirectTo("/pages2/regulateResume");
        }
        let jobIntention = this.wantJobList.map(item => {
          return item.name;
        });
        // if (jobIntention.length > 0) {
        //   this.$setStoraged("jobIntention", jobIntention.join(","));
        //   this.setJobIntention(jobIntention.join(","));
        // }
        this.$redirectTo("/pages2/urgentResume", { id: this.id, from: "add" });
      }, 200);
    },
    toFindWork() {
      this.$throttle(() => {
        let jobIntention = this.wantJobList.map(item => {
          return item.name;
        });
        // if (jobIntention.length > 0) {
        //   this.$setStoraged("jobIntention", jobIntention.join(","));
        //   this.setJobIntention(jobIntention.join(","));
        // }
        this.$redirectTo("/pages2/findWork", {
          isPageTitleFind: 1,
        });
      }, 200);
    },
    regulateResume() {
      this.$redirectTo("/pages2/regulateResume");
    },
    // 删除图片
    deletePic(index) {
      this.$throttle(() => {
        this.picture_url.splice(index, 1);
        this.fileList.splice(index, 1);
      }, 200);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);

      let fileListLen = this.fileList.length;
      lists.map(item => {
        this.fileList.push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        let result = await this.$http.upload(lists[i]);
        result = JSON.parse(result);
        if (result.code == 200) {
          this.picture_url.push(result.url);
          let item = this.fileList[fileListLen];
          this.fileList.splice(
            fileListLen,
            1,
            Object.assign(item, {
              status: "success",
              message: "上传成功",
              url: result.url,
            })
          );
          fileListLen++;
        } else {
          this.$layer.message("上传失败");
        }
      }
    },
    clickRightQiuZhiJob() {
      this.$throttle(() => {
        this.showJobPopup = true;
      }, 200);
    },
    clickSelectCity() {
      this.$throttle(() => {
        this.showCityPopup = true;
      }, 200);
    },
    getSelectAddress(data) {
      this.$throttle(() => {
        this.wantJobCityList = data;
        this.showCityPopup = false;
        this.isOk();
      }, 200);
    },
    xuqiuChange(data) {
      let content = data.detail.value;
      this.isPoneAvailable(content);
      console.log();
    },
    xuqiuBlur(data) {
      let content = data.detail.value;
      this.isPoneAvailable(content);
      console.log();
    },
    isPoneAvailable(str) {
      let regExp = /1[3-9]\d{9}/g;
      if (regExp.test(str)) {
        //替换中间四个
        // this.form.content = str.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
        //替换所有手机号
        this.form.content = str.replace(/(\.*)\d{11}(.*)/, "$1****$2");
        this.$layer.message("需求描述中请勿输入手机号等敏感信息");
      } else {
        console.log("不包含手机号");
      }
    },
    submitJob(data) {
      this.$throttle(() => {
        this.wantJobList = data;
        this.showJobPopup = false;
        this.isOk();
      }, 200);
    },
    deleteTagJob(index) {
      this.$throttle(() => {
        this.wantJobList.splice(index, 1);
      }, 200);
    },
    async submit() {
      this.$throttle(async () => {
        if (this.wantJobList.length <= 0) {
          this.$layer.message("请选择您的求职岗位");
          return false;
        }
        if (this.wantJobCityList.length <= 0) {
          this.$layer.message("请选择您的求职城市");
          return false;
        }

        if (!this.form.name) {
          this.$layer.message("请输入您的称呼");
          return false;
        }
        if (!this.form.phone) {
          this.$layer.message("请输入您的联系电话");
          return false;
        }
        let regExp = /1[3-9]\d{9}/g;
        if (!regExp.test(this.form.phone)) {
          this.$layer.message("请输入正确的手机号码");
          return false;
        }
        if (!this.form.content) {
          this.$layer.message("请输入需求描述");
          return false;
        }
        // if (!this.verifyPhone) {
        //   this.$layer.message("请校验您的手机号的合法性");
        //   return false;
        // }

        let job_intention = [];
        this.wantJobList.forEach(item => {
          job_intention.push(item.name);
        });
        let city_id_intention = [];
        this.wantJobCityList.forEach(item => {
          city_id_intention.push(item.id);
        });
        let city_text_intention = [];
        this.wantJobCityList.forEach(item => {
          city_text_intention.push(item.fullname);
        });

        let params = {
          name: this.form.name, //称呼 文字
          phone: this.form.phone, //电话
          job_intention: job_intention ? job_intention.join(",") : "", //求职岗位 多个求职岗位eg: 1，2，3（文字）
          city_id_list: city_id_intention ? city_id_intention.join(",") : "", //求职城市
          city_list: city_text_intention ? city_text_intention.join(",") : "", //求职城市列表 code,多个求职城市，逗号间隔
          picture_url: this.picture_url.length > 0 ? this.picture_url.join(",") : "", //图片 多个图片逗号分割
          content: this.form.content, //描述
          longitude: this.getUserLocationInfo ? this.getUserLocationInfo.ad_info.location.lng : 0 || 0, //经度
          latitude: this.getUserLocationInfo ? this.getUserLocationInfo.ad_info.location.lat : 0 || 0, //经度
        };
        if (this.id) {
          params.id = this.id * 1;
        }
        let res = await this.$http.requestSync(this.isEdit ? "/resumes/update" : "/resumes/create", params);
        if (res.code == 200) {
          this.id = res.resume.id;
          if (this.isEdit) {
            this.issueEditPopup = true;
          } else {
            this.issueAddPopup = true;
          }
          this.setStatus();
        } else {
          this.$layer.message(res.message);
          setTimeout(_ => {
            this.regulateResume();
          }, 1000);
        }
      }, 500);
    },
    changePhone() {
      if (!this.verifyPhone) {
        let regExp = new RegExp("^1[3578]\\d{9}$");
        if (regExp.test(this.form.phone)) {
          this.showCodePopup = true;
          this.$throttle(() => {
            if (this.$refs.phoneCode) {
              this.$refs.phoneCode.getCode("create");
            }
          }, 1500);
          this.isOk();
        } else {
          this.$layer.message("请输入正确的手机号码");
        }
      }
      if (this.$getStoraged("phone").length) {
        if (this.$getStoraged("phone") != this.form.phone) {
          this.verifyPhone = false;
        }
      }
    },
    async getLocation() {
      let res = await this.$getLocationPromise();
      if (res) {
        let res2 = await this.$http.request(
          "https://apis.map.qq.com/ws/geocoder/v1/?key=6KJBZ-ZB2W4-NXNUB-DT7KO-E4KMJ-7KB5L&location=" + res.latitude + "," + res.longitude,
          "GET",
          {},
          data => {
            this.$setStoraged("userLocationInfo", data.result);
            this.setSelectCity([
              {
                fullname: data.result.ad_info.province,
                name: data.result.ad_info.province,
                id: data.result.ad_info.adcode.slice(0, 2) + "0000",
              },
            ]);
            uni.setStorageSync("userSelectCity", [
              {
                fullname: data.result.ad_info.province,
                name: data.result.ad_info.province,
                id: data.result.ad_info.adcode.slice(0, 2) + "0000",
              },
            ]);
            this.wantJobCityList = [
              {
                fullname: data.result.ad_info.province,
                name: data.result.ad_info.province,
                id: data.result.ad_info.adcode.slice(0, 2) + "0000",
              },
            ];
            this.setUserLocationInfo(data.result); //保存用户位置信息到vuex中，方便在选择地址时直接选择
          }
        );
      }
    },
    cancelCodePopup() {
      this.$throttle(() => {
        this.showCodePopup = false;
      }, 200);
    },
    codeSuccess() {
      this.$throttle(() => {
        this.showCodePopup = false;
        this.verifyPhone = true;
        this.isOk();
      }, 200);
    },
    isOk() {
      if (this.form.content && this.form.phone && this.form.name && this.wantJobCityList.length > 0 && this.wantJobList.length > 0) {
        this.isFabu = true;
      } else {
        this.isFabu = false;
      }
    },
    getAddress(data) {
      this.$throttle(() => {
        this.showselectAddressPopup = false;
        this.address = data;
      }, 200);
    },
    async getInfo(id) {
      this.$throttle(async () => {
        let res = await this.$http.requestSync(`/resumes/info/${id}`, {}, "GET");
        if (res.code == 200) {
          //期望城市
          let cityNameArr = res.resume.city_list.split(",");
          let cityIdArr = res.resume.city_id_list.split(",");
          res.resume.job_intention.split(",").forEach(item => {
            this.jobActiveList.push({
              name: item,
            });
          });
          cityNameArr.forEach((item, index) => {
            let obj = {
              id: cityIdArr[index],
              name: item,
              fullname: item,
            };
            this.wantJobCityList.push(obj);
          });
          // 求职岗位
          let jobArr = res.resume.job_intention.split(",");
          jobArr.forEach(item => {
            this.wantJobList.push({
              name: item,
            });
          });
          // 手机号
          this.form.phone = res.resume.phone;
          //称呼
          this.form.name = res.resume.name;
          //需求描述
          this.form.content = res.resume.content;
          this.isTop = res.resume.is_buy_urgent;
          //图片
          if (res.resume.picture_url) {
            if (res.resume.picture_url.split(",").length > -1) {
              this.fileList = res.resume.picture_url.split(",");
              this.picture_url = res.resume.picture_url.split(",");
            } else {
              this.fileList = [res.resume.picture_url];
              this.picture_url = [res.resume.picture_url];
            }
          }
        }
      }, 200);
    },
  },
  watch: {
    form: {
      handler(n, o) {
        this.isOk();
      },
      deep: true,
    },
  },

  // 页面周期函数--监听页面加载
  onLoad(options) {
    console.log("this.getSelectCity", this.getSelectCity);
    if (options.params) {
      let params = JSON.parse(decodeURIComponent(options.params));
      if (params.shareUserId) {
        this.$setStoraged("shareUserId", params.shareUserId);
        this.isShare = 1;
      }
    }

    if (options.phone) {
      this.form.phone = options.phone;
      this.verifyPhone = true;
    } else if (this.getPhone) {
      this.form.phone = this.getPhone;
      this.verifyPhone = true;
    }
    if (options.id) {
      this.showJobPopup = false;
      this.id = options.id;
      this.isEdit = true;
    } else {
      console.log("535", this.getSelectCity);
      this.wantJobCityList = this.getSelectCity;
      this.showJobPopup = true;
      this.isEdit = false;
    }
    let designWidth = 37.5; //因设计图的宽度
    let that = this;
    //窗体改变大小触发事件
    uni.onWindowResize(res => {
      console.log("变化后的窗口宽度=", res.size.windowWidth);
      //100*屏幕宽度/设计稿宽度
      that.fontsize = Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
      console.log("字体大小：", that.fontsize);
    });

    //打开获取屏幕大小
    uni.getSystemInfo({
      success(res) {
        console.log("设备信息：", res);
        that.fontsize = Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
        console.log("字体大小：", that.fontsize);
      },
    });
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {
    if (this.id) {
      this.wantJobList = [];
      this.wantJobCityList = [];
      this.getInfo(this.id);
    }
  },
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style scoped lang="scss">
.postRecruitmentInformation {
  background: #f7f7f7;
  .container {
    .form_item {
      box-sizing: border-box;
      padding: 17px 10px 8px;
      margin: 10px auto;
      background: #fff !important;
      border-radius: 10px;
      font-size: 15px;
      align-items: center;
      .form-item-right-qiuzhi {
        display: flex;
        justify-content: flex-end;
        width: 150px;
        height: 100%;
        color: #bfbfbf;
        margin-right: 3px;
        @include ell();
      }
      .form-item-bottom-qiuzhi {
        display: flex;
        flex-wrap: wrap;
        .tag {
          position: relative;
          box-sizing: border-box;
          padding: 6px 10px;
          background: #ffedde;
          border-radius: 4px 4px 4px 4px;
          margin: 10px 10px 0 0;
          color: #ff8822;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          .iconfont {
            position: absolute;
            top: -15%;
            right: -7px;
            font-size: 14px;
          }
        }
      }
      .form-item-right-city {
        font-size: 15px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
      .form-item-right-btn {
        width: 76px;
        height: 27px;
        background: #ff8822;
        border-radius: 14px 14px 14px 14px;
        opacity: 1;
        font-size: 12px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        text-align: center;
        line-height: 27px;
      }
      .form-item-right-desc {
        position: relative;

        #xuqiuTextArea {
          background: #fafafa;
          border-radius: 6px 6px 6px 6px;
          opacity: 1;
          border: 1px solid #e8e8e8;
          min-height: 101px;
          width: 100%;
          box-sizing: border-box;
          padding: 10px;
          font-size: 14px;
          padding-bottom: 20px;
        }
        .text {
          position: absolute;
          right: 10px;
          bottom: 5px;
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #bfbfbf;
        }
      }
      .form-item-right-upload {
        .title2 {
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }

      #userName {
        text-align: right;
      }
    }
    .form-bottom {
      margin-bottom: 20px !important;
    }
  }
  /deep/.u-upload {
    margin: 10px auto 15px;
  }
  .btn_wrap {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
    padding-bottom: 10px;
    background: #f7f7f7;
    .text {
      font-size: 12px;
      font-weight: 400;
      color: #999999;
      width: 100%;
      box-sizing: border-box;
      padding: 13px 40px 11px 40px;
      line-height: 16px;
      .s1 {
      }
      .s2 {
        color: #ff8822;
      }
    }
    .submit {
      width: 300px;
      height: 42px;
      background: #fbbf8c;
      border-radius: 21px 21px 21px 21px;
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      text-align: center;
      line-height: 42px;
      margin: 0 auto;
    }
    .isLight {
      background: #ff8822;
    }
  }
  .image_list {
    display: flex;
    .item {
      width: 74px;
      height: 74px;
      border-radius: 8px;
      margin: 10px 10px 15px auto;
      overflow: hidden;
      position: relative;
      image {
        width: 100%;
        height: 100%;
      }
      .deletePic {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 20px;
        height: 20px;
        background: #00000039;
        border-bottom-left-radius: 100px;

        .iconfont {
          position: absolute;
          top: 3px;
          right: 3px;
          font-size: 10px;
          text-align: right;
        }
      }
    }
  }
  .u-upload {
    .u-upload__wrap {
      .u-upload__wrap__preview {
        image {
          width: 76px !important;
          height: 76px !important;
        }
      }
    }
  }
  .issuePopup {
    height: 344px;
    width: 257px;
    background: url("@/pages2/static/images/4.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0px auto 0;
    .title {
      font-size: 15px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ff8822;
      width: 139px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      background: #ffeedf;
      border-radius: 0px 0px 14px 14px;
      margin: 12px auto 0;
      display: flex;
      align-items: center;
      .iconfont {
        width: 16px;
        height: 16px;
        background: url("@/pages2/static/images/5.png");
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
        margin-left: 31px;
        margin-right: 2px;
      }
    }
    .h1 {
      font-size: 15px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      width: 100%;
      text-align: center;
      margin: 10px auto 12px;
    }
    .st {
      width: 225px;
      margin: 12px auto;
      padding-left: 8px;
      box-sizing: border-box;
      font-size: 13px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    .jjqz {
      width: 175px;
      height: 40px;
      background: linear-gradient(270deg, #ffa222 0%, #ff8822 100%);
      border-radius: 20px 20px 20px 20px;
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
      margin: 12px auto 10px;
    }
    .desc {
      font-size: 13px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      text-align: center;
    }
    .ckgw {
      width: 175px;
      height: 40px;
      border-radius: 20px 20px 20px 20px;
      opacity: 1;
      border: 1px solid #ff8822;
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ff8822;
      line-height: 40px;
      margin: 12px auto;
      text-align: center;
    }
    &.issueEditPopup {
      height: 280px;
      border-radius: 12px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .image {
        margin-top: 25px;
        width: 100px;
        height: 24px;
      }
      .name {
        margin-top: 8px;
        line-height: 20px;
        color: #999999;
        font-size: 14px;
      }
      .icon {
        margin-top: 15px;
        width: 170px;
        height: 96px;
      }
      .jjqz {
        margin-top: 20px;
        height: 40px;
      }
    }
  }
  .close {
    width: 23px;
    height: 23px;
    margin: 0 auto;
  }
  .u-upload__deletable {
    width: 20px;
    height: 20px;
  }
}
</style>
